<!--
 * @Author: 王灿
 * @Date: 2019-11-26 20:43:08
 * @LastEditTime: 2020-03-24 18:18:57
 * @Description: 咨询操作
 * @FilePath: \scarlet-sparrow-admin\src\views\system\system-inform\index.vue
 -->
 <template>
  <happy-scroll color="rgba(0,0,0,0)" size="5" :resize="true" class="inform-operate">
    <el-form :model="ruleForm" ref="ruleForm" :rules="rules">
      <!-- 标题 -->
      <el-form-item prop="title">
        <el-row>
          <el-input v-model="ruleForm.title" placeholder="咨询标题" clearable></el-input>
        </el-row>
      </el-form-item>
      <!-- 类别 -->
      <el-form-item prop="category">
        <el-row style="display: flex;">
          <el-select
            v-model="ruleForm.category"
            clearable
            placeholder="咨询类别"
            :class="{active: ruleForm.category === 5}"
          >
            <el-option
              v-for="item in categoryOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-select v-if="ruleForm.category === 5" v-model="category" clearable placeholder="上传类别">
            <el-option
              v-for="item in uploadCategory"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-row>
      </el-form-item>
      <!-- 上传组件 -->
      <el-form-item prop="mainPic">
        <el-row>
          <jq-upload
            v-if="(ruleForm.category === 5 && category === 0) || ruleForm.category !== 5"
            :upData="picObj"
            :fileList="fileList"
            @onChangeImageKey="onChangeImageKey"
          />
          <upload-video
            v-if="ruleForm.category === 5 && category === 1"
            :upData="picObjVideo"
            :fileList="fileList"
            @onChangeImageKey="onChangeImageKey"
          />
        </el-row>
      </el-form-item>
      <el-form-item prop="content">
        <!-- 富文本 -->
        <el-row class="el-form__quill">
          <jq-tinymce
            v-show="ruleForm.category !== 5"
            ref="editor"
            v-model="ruleForm.content"
            :isUpdate="isUpdate"
            :minHeight="400"
            @input="onGetEditorValue"
          />
          <el-input
            v-show="ruleForm.category === 5"
            type="textarea"
            v-model="ruleForm.content"
            placeholder="咨询内容"
            clearable
          ></el-input>
        </el-row>
      </el-form-item>
      <!-- 浏览量 -->
      <el-form-item prop="browseNum" v-if="row.id">
        <el-row>
          <el-input v-model.number="ruleForm.browseNum" placeholder="浏览量" clearable></el-input>
        </el-row>
      </el-form-item>
      <!-- 点赞数 -->
      <el-form-item prop="praisePoints" v-if="row.id">
        <el-row>
          <el-input v-model.number="ruleForm.praisePoints" placeholder="点赞数" clearable></el-input>
        </el-row>
      </el-form-item>
      <el-form-item class="dialog-footer">
        <el-button type="primary" @click="onSubmitForm('ruleForm')">确 定</el-button>
        <el-button @click="onCancelForm('ruleForm')">取 消</el-button>
      </el-form-item>
    </el-form>
  </happy-scroll>
</template>
<script>
import JqUpload from '@/components/jq-upload/index.vue'
import UploadVideo from '@/components/upload-video/index.vue'
import JqTinymce from '@/components/jq-tinymce/index.vue'
import { getInformAdd, getInformUpdate } from '@/api/configure.js'
import { getDownUrl } from '@/api/commodity.js'
export default {
  name: 'InformOperate',
  components: { JqUpload, UploadVideo, JqTinymce },
  props: {
    // 默认数据
    row: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      ruleForm: {
        id: '',
        title: '',
        mainPic: '',
        talentPic: '',
        content: '',
        category: '',
        browseNum: 0,
        praisePoints: 0
      },
      rules: {
        title: [{ required: true, message: '请输入咨询标题', trigger: 'blur' }],
        // mainPic: [{ required: true, message: '请上传主图', trigger: 'blur' }],
        content: [{ required: true, message: '请输入详情', trigger: 'blur' }],
        category: [{ required: true, message: '请选择类别', trigger: 'blur' }],
        browseNum: [
          { required: true, message: '请输入浏览量', trigger: 'blur' }
        ],
        praisePoints: [
          { required: true, message: '请输入点赞数', trigger: 'blur' }
        ]
      },
      fileList: [],
      picObj: {
        label: '咨讯主图',
        accept: 'image/png, image/gif, image/jpg, image/jpeg',
        limit: 9,
        type: 1,
        isImage: true
      },
      picObjVideo: {
        label: '咨讯视频',
        accept: 'video/mp4',
        limit: 1,
        type: 1,
        isImage: true
      },
      isUpdate: false,
      categoryOptions: [
        { value: 0, label: '早报' },
        { value: 1, label: '疾病常识' },
        { value: 2, label: '健康养生' },
        { value: 3, label: '洞察世界' },
        { value: 5, label: '达人孵化' }
      ],
      uploadCategory: [
        { value: 0, label: '图片' },
        { value: 1, label: '视频' }
      ],
      category: ''
    }
  },
  watch: {
    // 获取默认数据
    row() {
      this.isUpdate = false
      this.onGetRow()
    },
    // 监听类型变化
    'ruleForm.category'(val, oldVal) {
      this.ruleForm.mainPic = ''
      this.ruleForm.talentPic = ''
      this.fileList = []
    }
  },
  created() {
    this.onGetRow()
  },
  methods: {
    // 默认数据
    onGetRow() {
      this.fileList = []
      let boolean = JSON.stringify(this.row) !== '{}'
      this.ruleForm.id = boolean ? this.row.id : ''
      this.ruleForm.title = boolean ? this.row.title : ''
      this.ruleForm.mainPic = boolean ? this.row.mainPic : ''
      this.ruleForm.content = boolean ? this.row.content : ''
      this.ruleForm.category = boolean ? this.row.category : ''
      this.ruleForm.talentPic = boolean ? this.row.talentPic : ''
      if (boolean) {
        this.category = this.row.mainPic ? 1 : 0
        // 下载图片
        if (this.row.talentPic) {
          let _resultPic = this.row.talentPic.split(',')
          _resultPic.forEach(pic => {
            getDownUrl({
              fileName: pic
            }).then(res => {
              this.fileList.push({
                name: pic,
                url: res.data.url.split('?')[0]
              })
            })
          })
        } else {
          getDownUrl({
            fileName: this.row.mainPic
          }).then(res => {
            this.fileList.push({
              name: this.row.mainPic,
              url: res.data.url.split('?')[0]
            })
          })
        }
      }
    },
    // 赋值富文本
    onGetEditorValue(data) {
      this.isUpdate = true
      this.ruleForm.content = data
    },
    // 子组件传值
    onChangeImageKey(fileName, type, isDetele, url) {
      if (isDetele) {
        if (this.category === 0 && this.ruleForm.category === 5) {
          if (this.ruleForm.talentPic.indexOf(',') === 0) {
            this.ruleForm.talentPic = this.ruleForm.talentPic.substr(1).split(',').filter(value => value !== fileName).join(',')
          } else {
            this.ruleForm.talentPic = this.ruleForm.talentPic.split(',').filter(value => value !== fileName).join(',')
          }
        } else {
          this.ruleForm.mainPic = fileName
        }
        this.fileList = this.fileList.filter(item => item.name !== fileName)
      } else {
        if (this.category === 0 && this.ruleForm.category === 5) {
          this.ruleForm.talentPic += ',' + fileName
        } else {
          this.ruleForm.mainPic = fileName
        }
        this.fileList.push({ name: fileName, url: url })
      }
    },
    // 提交
    onSubmitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.ruleForm.talentPic.indexOf(',') === 0) {
            this.ruleForm.talentPic = this.ruleForm.talentPic.substr(1)
          }
          if (this.row.id) {
            // 编辑
            // let form = new FormData()
            // form.append('id', this.ruleForm.id)
            // form.append('title', this.ruleForm.title)
            // form.append('mainPic', this.ruleForm.mainPic)
            // form.append('content', this.ruleForm.content)
            // form.append('category', this.ruleForm.category)
            // form.append('browseNum', this.ruleForm.browseNum)
            // form.append('praisePoints', this.ruleForm.praisePoints)
            getInformUpdate(this.ruleForm).then(res => {
              this.$notify.success({
                title: '提示',
                message: '编辑成功'
              })
              this.onRefresh()
            })
          } else {
            // 新增
            getInformAdd(this.ruleForm).then(res => {
              this.$notify.success({
                title: '提示',
                message: '创建成功'
              })
              this.onRefresh()
            })
          }
        }
      })
    },
    // 取消
    onCancelForm(formName) {
      this.$refs[formName].resetFields()
      let data = { isShow: false, isRefresh: false }
      this.$emit('onCancelBtn', data)
    },
    // 刷新页面
    onRefresh() {
      setTimeout(() => {
        let data = { isShow: false, isRefresh: true }
        this.$emit('onCancelBtn', data)
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form__quill {
  width: 100%;
  margin-top: 10px;
}
</style>

<style lang="scss">
.inform-operate {
  height: 100%;
  .el-form {
    width: 100%;
    .el-select {
      width: 100%;
    }
    .el-cascader {
      width: 100%;
      line-height: 30px;
    }
    .dialog-footer {
      @include row;
      justify-content: flex-end;
      margin-top: 22px;
    }
  }
}
</style>

<style lang="scss">
.inform-operate {
  .active {
    margin-right: 10px;
  }
}
</style>
